<template>
  <div id="ResourceList">
    <!-- 搜索框 -->
    <div id="selectBar">
      <el-input placeholder="请输入URL关键字" v-model="searchUrl" clearable style="width: 180px;"></el-input>
      <el-input placeholder="请输入类型关键字" v-model="searchType" clearable style="width: 180px;"></el-input>
      <el-button icon="el-icon-search" circle @click="search(true)" class="search"></el-button>
    </div>
    <!-- 表格 -->
    <el-table border stripe class="el-table" :data="resourceData">
      <el-table-column prop="id" label="id" align="center"></el-table-column>
      <el-table-column prop="url" label="url"></el-table-column>
      <el-table-column prop="text" label="描述"></el-table-column>
      <el-table-column prop="type" label="类型" align="center"></el-table-column>
      <el-table-column label="操作" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button @click="currentResource = scope.row; resourceEditShow = true;" type="primary"
            icon="el-icon-edit" size="mini"></el-button>
          <el-button @click="currentResource = scope.row; resourceDeleteShow = true;" type="primary"
            icon="el-icon-delete" size="mini"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页按钮 -->
    <div id="paging">
      <el-pagination layout="prev, pager, next" :page-size="pageSize" :total="total" @current-change="pageCurrentChange">
      </el-pagination>
    </div>
    <!-- 删除提示框 -->
    <el-dialog title="提示" :visible.sync="resourceDeleteShow" width="30%">
      <span>确定删除该资源么</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resourceDeleteShow = false;">取 消</el-button>
        <el-button type="primary" @click="deleteResource(); resourceDeleteShow = false;">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑提示框 -->
    <el-dialog title="编辑资源" :visible.sync="resourceEditShow" width="30%">
      <el-form :model="currentResource" label-position="top">
        <el-form-item>
          <span>id：{{ currentResource.id }}</span>
        </el-form-item>
        <el-form-item label="url">
          <el-input v-model="currentResource.url" type="input" clearable></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="currentResource.text" type="textarea" autosize></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-input v-model="currentResource.type" type="input" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resourceEditShow = false;">取 消</el-button>
        <el-button type="primary" @click="editEssay(); resourceEditShow = false;">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      resourceData: [], // 资源数据
      currentResource: {}, // 当前操作资源数据
      resourceDeleteShow: false, // 资源删除提示框显示/隐藏
      resourceEditShow: false, // 资源编辑提示框显示/隐藏
      currentPage: 1, // 当前页
      pageSize: 10, // 页大小
      total: 0, // 总数据大小
      searchOrNot: false, // 是否搜索状态量，用于确定翻页后数据从那个方法得到
      searchUrl: '', // 搜索url内容
      searchType: '', // 搜索类型内容
    }
  },
  methods: {
    // 获取资源数据
    getAllResourceData() {
      // 请求获取资源数据
      this.$axios({
        method: 'post',
        url: '/webResource/login/getResource/' + this.currentPage + '/' + this.pageSize,
      }).then(res => {
        this.resourceData = res.data.data.data
        this.total = res.data.data.total
      })
    },
    // 翻页事件
    pageCurrentChange(val) {
      this.currentPage = val // 更改当前页
      if (this.searchOrNot) { // 若搜索过，就用筛选搜索的方式查询数据
        this.search(false)
        return
      }
      this.getAllResourceData()
    },
    // 筛选搜索资源事件,参数意思：表示是翻页查找(不需要重设页状态)，还是按钮点击查找(需要重设页状态)
    search(buttonSearchOrNot) {
      if (buttonSearchOrNot) { // 若为按钮点击搜索,重设页状态
        this.currentPage = 1
        this.total = 0
      }
      this.searchOrNot = true // 改变搜索状态量
      let data = new FormData()
      if(this.searchUrl != '' && this.searchUrl != null) data.append("searchUrlContent",this.searchUrl)
      if(this.searchType != '' && this.searchType != null) data.append("searchTypeContent",this.searchType)
      this.$axios({
        method: 'post',
        url: '/webResource/login/searchResourceByUrlAndType/' + this.currentPage + '/' + this.pageSize,
        data:data,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        this.resourceData = res.data.data.data
        this.total = res.data.data.total
      })
    },
    // 删除资源
    deleteResource() {
      this.$axios({
        method: 'post',
        url: '/webResource/login/deleteResource/' + this.currentResource.id
      }).then(res => {
        if(res.data) {
          this.$router.go(0)
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
          })
        } else {
          this.$message({
            message: '删除失败！出现错误了X.X',
            type: 'error',
            showClose: true,
          })
        }
      })
    },
    // 提交编辑资源
    editEssay() {
      let data = new FormData()
      data.append("id",this.currentResource.id)
      data.append("url",this.currentResource.url)
      data.append("text",this.currentResource.text)
      data.append("type",this.currentResource.type)
      this.$axios({
        method: 'post',
        url: '/webResource/login/updateResource',
        data: data,
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then(res => {
        if(res.data) {
          this.$router.go(0)
          this.$message({
            message: '删除成功',
            type: 'success',
            showClose: true,
          })
        } else {
          this.$message({
            message: '删除失败！出现错误了X.X',
            type: 'error',
            showClose: true,
          })
        }
      })
    }
  },
  mounted() {
    this.getAllResourceData()
  }
}
</script>

<style lang="scss" scoped>
#ResourceList {
  margin-bottom: 20px;
}
#selectBar {
  margin: 20px auto;
  display: flex;
  justify-content: center;
}
</style>
<style scoped="scoped">
/* 表格 */
.el-table {
  width: 80%;
  margin: 0 auto;
  border-radius: 20px;
}

.el-table__row {
  background-color: rgba(0, 0, 0, 0);
}

/deep/.el-table--border {
  border-color: #464646;
}

/deep/.el-table th.el-table__cell.is-leaf {
  border-color: #464646;
}

/deep/ .el-table thead tr>th {
  background-color: #202020 !important;
  color: #464646;
  border-color: #464646;
}

/deep/ .el-table tbody tr>td {
  background-color: #202020 !important;
  border-color: #464646;
}

/deep/.el-table::before,
/deep/.el-table__fixed-right::before {
  background-color: rgba(0, 0, 0, 0);
}
/deep/.el-table__empty-block {
    background-color: #202020;
}
.cell .el-button--primary {
  margin-bottom: 10px;
}
.cell .el-button--primary {
  margin-bottom: 10px;
}
/deep/.el-table__body-wrapper {
    border-bottom: .5px solid;
}
/* 分页 */

/deep/.el-pagination {
  display: flex;
  justify-content: center;
  margin: 20px auto;
  color: #202020;
}

/deep/.el-pagination button {
  color: #fff;
  background-color: #202020;
}

/deep/ .el-pager li.active {
  color: rgb(255, 150, 50);
}

/deep/ .number {
  color: #fff;
}

/deep/ .number:hover {
  color: rgb(255, 150, 50);
}

/deep/.el-pager li {
  background-color: #202020;
}

/* 搜索框 */
.search {
  background-color: #202020;
  color: #fff;
}
#selectBar .el-input,
#selectBar .el-select {
  margin: 0 20px;
}

/deep/#selectBar .el-input__inner {
  color: #fff;
  background-color: #202020;
}
</style>